﻿
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>自定义贺卡</title>
    <link href="~/Content/weui.min.css" rel="stylesheet" />
</head>
<body ontouchstart>
    <div class="weui-toptips weui-toptips_warn js_tooltips">错误提示</div>
    <div class="container" id="container"></div>
    <div class="weui-cells__title">自定义贺卡</div>
    <div class="weui-cells">
        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
                <label for="" class="weui-label">选择主题</label>
            </div>
            <div class="weui-cell__bd">
                <select class="weui-select" id="theme"></select>
            </div>
        </div>
    </div>
    @*<div class="weui-cells__title">滚动文字</div>*@
    <div class="weui-cells">
        <div class="weui-cell weui-cell_select">
            <div class="weui-cell__bd">
                <select class="weui-select" name="scrolltxt" id="scrolltxt">
                    <option selected="selected" value="">选择模板</option>
                    <option value="爱你，无须华丽的词藻表达，我会努力延续你快乐的笑声；爱你，无须时时伴你左右呵护你；你有你的天空，你有你的风雨，你哭了，我会递上一方纸巾，告诉你这个世界还有

我；你累了，我这有你栖息的肩膀，和你一起融入这生活。只想告诉你：爱你的我一直都在！">
                        生日快乐
                    </option>
                    <option value="时间一直流，一直流，不会停下来等着我觉悟，悔改。日子怎么翻，我就怎么过。颓废似乎成了某种自豪。我厌恶着，鄙视着这样无趣的我，无聊的人生。总该学点什么啊。">

                        时间都去哪了
                    </option>
                    <option value="内蒙古特产，自己家做的，奶皮子，奶豆腐陷，无添加">
                        内蒙特产
                    </option>
                </select>
            </div>
        </div>
    </div>
    @*<div class="weui-cells__title">文字内容</div>*@
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" id="txtContent" placeholder="请输入文本" rows="3"></textarea>
                @*<div class="weui-textarea-counter"><span>0</span>/200</div>*@
            </div>
        </div>
    </div>

    @*图片*@
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">自定义背景</p>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                            @*<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                                <div class="weui-uploader__file-content">
                                    <i class="weui-icon-warn"></i>
                                </div>
                            </li>*@
                            @*<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                                <div class="weui-uploader__file-content">上传中...</div>
                            </li>*@
                            @*<li class="weui-uploader__file"><img src="" /></li>*@
                            @*<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>*@
                            @*<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                            *@
                        </ul>
                        <div class="weui-uploader__input-box">
                            <button id="chooseImage" class="weui-uploader__input" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @*图片结束*@
    <div class="weui-btn-area" id="addHKdiv">
        <a class="weui-btn weui-btn_primary" href="#" id="addHK">确定</a>
    </div>
    <div class="weui-btn-area" id="viewHKdiv" style="display:none;">
        <a class="weui-btn weui-btn_plain-primary" href="#" id="viewHk">预览</a>
        <a class="weui-btn weui-btn_plain-primary" href="#" id="viewHk1">静态页预览</a>
    </div>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>


    </script>

    <script>

        var hkid = null;
        var imgId = null;
        $(function () {

            $.post('/home/GetTheme', {}, function (data) {
                var html = [];
                for (var i in data) {
                    var title = data[i].Title;
                    var Id = data[i].Id;
                    html.push('<option value="' + Id + '">' + title + '</option>')
                }
                $("#theme").html(html.join(''))
            })

            $("#scrolltxt").change(function () {
                $("#txtContent").val($(this).val());
            })

            $("#addHK").click(function () {
                var t = $("#theme").val();
                if (t == "") {
                    alert("请选择贺卡主题");
                    return;
                }
                var txt = $("#txtContent").val();
                if (txt == "") {
                    alert("别忘记加上您想说的话！");
                    return;
                }

                if (imgId == null) {
                    alert('图片上传失败'); //return;
                }
                var p = {
                    themeId: t,
                    hkTxt: txt,
                    musicUrl: "",
                    img: imgId
                };

                $.post('/home/AddHK', p, function (data) {
                    console.log(data);
                    if (data.result && data.value != "") {
                        hkid = data.value;
                        viewUrl = data.url;
                        alert('创建成功!');
                        $("#viewHKdiv").show();
                        $("#addHKdiv").hide();
                    } else {
                        alert('创建失败')
                    }
                })
            })

            var viewUrl = null;
            //预览
            $("#viewHk").click(function () {
                window.location.href = "/home/viewhk?id=" + hkid;
            })
            //预览
            $("#viewHk1").click(function () {
                window.location.href = viewUrl;
            })


            wx.config({
                debug: false,
                appId: '@ViewBag.appId', // 必填，公众号的唯一标识
                timestamp: '@ViewBag.timestamp', // 必填，生成签名的时间戳
                nonceStr: '@ViewBag.nonceStr', // 必填，生成签名的随机串
                signature: '@ViewBag.signature',// 必填，签名，见附录1
                jsApiList: ['chooseImage', 'uploadImage', 'getLocalImgData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });

            wx.ready(function () {
                //wx.checkJsApi({
                //    jsApiList: [
                //      'chooseImage',
                //    ],
                //    success: function (res) {
                //        alert(JSON.stringify(res));
                //    }
                //});

                document.querySelector('#chooseImage').onclick = function () {
                    wx.chooseImage({
                        count:1,
                        success: function (res) {
                            //images.localId = res.localIds;
                            for (var i = 0; i < res.localIds.length; i++) {
                                $("#uploaderFiles").append('<li class="weui-uploader__file" style="background-image:url(' + res.localIds[i] + ')"></li>')

                                //wx.getLocalImgData({
                                //    localId: res.localIds[i], // 图片的localID
                                //    success: function (res) {
                                //        var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                //        alert(localData);
                                //        $("#uploaderFiles").append('<li class="weui-uploader__file" style="background-image:url(' + localData + ')"></li><li><img   class="weui-uploader__file" src="' + localData + '" /></li>')

                                //    }
                                //});

                                wx.uploadImage({
                                    localId: res.localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
                                    isShowProgressTips: 1, // 默认为1，显示进度提示
                                    success: function (res) {
                                        var serverId = res.serverId; // 返回图片的服务器端ID
                                        imgId = serverId;
                                        $("#uploaderFiles").html('<li class="weui-uploader__file" style="background-image:url(' + res.localIds[i] + ')"></li>')

                                    },
                                    fail: function (e) {
                                        alert(e);
                                    }
                                });

                            }
                            //alert('已选择 ' + res.localIds.length + ' 张图片');
                        }
                    });
                };
            })

        })
    </script>
</body>
</html>
